Topbar로 가려지는 Anchor link(id) 문제
마지막 수정일: 2025. 01. 14.
문제 상황
화면 맨 위에 sticky topbar로 인해 section의 중간부터 보이는 듯한 문제가 생김
view와 scroll를 조절해서 해결할 수도 있지 않을까 생각했지만 마땅한 방법이 찾지 못함
예상 동작 화면
실제 화면
해결 방법
javascript로 scroll 동작 과정을 override해서 해결하는 방법도 있지만 topbar만큼 이동하면 되므로 css로 간단하게 해결함
/* 헤더 스크롤 마진 추가 + 여유공간 */
.markdown-body h2 {
scroll-margin-top: calc(var(--topbar-height) + 20px);
}
topbar 만큼 margin을 주고 거기에 적절한 여유공간을 줘서 해결